<template>
	<view class="container">
		<!-- ===============================       收货地址         =============================== -->
		<view class="msg" @click="choseAddress">
			<view class="left">
				<view><text>{{ pageData.default_address[0].receive_name || '收货人' }}</text><text style="margin-left: 20rpx;">{{ pageData.default_address[0].receive_tel || '收货号码'}}</text></view>
				<view>{{ pageData.default_address[0].area_info +  pageData.default_address[0].address || '收货地址' }}</view>
			</view>
			<view class="right">
				<image src="https://community.chuangxiangdianli.com/images/order/order_arrow.png" mode=""></image>
			</view>
		</view>
		<!--  ===============================       要购买的商品列表         ===============================  -->
		<view class="goods">
			<!-- 顶部    店铺名称 -->
			<view class="store" v-for="(item, index) in pageData.info">
				<view class="active">
					<!-- <image class="store_icon" :src="item.store_logo" mode=""></image> -->
					<view class="activeName">{{ item.store_name }}</view>
				</view>
				<!-- <view class="freeShip">免运费</view> -->
				<!-- 商品 -->
				<view class="good" v-for="(v, n) in item.goods_list">
					<view class="goods_pic">
						<image :src="v.goods_master_image" mode=""></image>
					</view>
					<view class="goods_msg">
						<view class="goods_name">{{ v.goods_name }}</view>
						<view class="goods_spec">
							<view v-if="v.sku_id">
								<text>{{ v.sku_name }}</text>
								<image src="https://community.chuangxiangdianli.com/images/shopCar/car_down.png" mode=""></image>
							</view>
						</view>
						<view class="goods_price">
							<view class="price">￥<text>{{ v.goods_price }}</text></view>
							<view class="num">
								<view @click="reduce(v, 1)">-</view>
								<view>{{ v.buy_num }}</view>
								<view @click="add(v, 0)">+</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			
		</view>
		<!-- 优惠券 -->
		<view class="coupon" v-if="false">
			<view>
				优惠券
			</view>
			<view>
				-￥60.00
			</view>
		</view>
		<!--  ===============================      优惠金额/实际支付     ===============================  -->
		<view class="orderMoney">
			<view class="coupon">
				<view>立减</view>
				<view>-￥{{ pageData.discount_price || 0 }}</view>
			</view>
			<view class="coupon">
				<view>积分抵扣</view>
				<view>-￥{{ pageData.integral_ratio_price || 0 }}</view>
			</view>
			<view class="coupon">
				<view>配送费</view>
				<view>￥{{ pageData.freight_money || 0 }}</view>
			</view>
		</view>
		<!--  ===============================     去结算     ===============================  -->
		<view class="pay">
			<view class="zj">
				<text style="color: rgba(126, 126, 126, 1);">总计</text>￥<text>{{ pageData.total_price }}</text>
			</view>
			<view class="btn" :style="payFlag ? '' : 'background: #CCCCCC;'" @click="pay">去结算</view>
		</view>
		<!--  ===============================     用户地址弹出框     ===============================  -->
		<u-popup v-model="addressFlag" mode='bottom' :closeable="true" border-radius="20">
			<view class="addTitle">
				收货地址
				<view class="new" @click="goAddress">新增</view>
			</view>
			<scroll-view scroll-y="true" style="max-height: 700rpx;min-height:300rpx;padding: 0 30rpx;box-sizing: border-box;">
				<view class="to_address_item" v-if="JSON.stringify(addressData) != '[]'" v-for="(item, index) in addressData" @click="changeAddress(index)">
					<view class="check_box">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_n.png" v-if="index != addressIndex" alt="">
						<img src="https://community.chuangxiangdianli.com/images/shopCar/choose_s.png" v-if="index == addressIndex" alt="">
					</view>
					<view class="txt_box over2">{{item.area_info+item.address}}</view>
				</view>
				<view class="addTitle" v-if="JSON.stringify(addressData) == '[]'">暂无收货地址</view>
			</scroll-view>
			<view class="button_box">确认</view>
		</u-popup>
	</view>
</template>

<script>
	export default{
		data() {
			return{
				arr: [], // 传递过来的商品信息
				addressIndex: 0, // 用户选中的id
				addressFlag: false, // 地址选择弹出框
				addressData: [], // 用户地址信息
				payFlag: false,
				pageData: {
					default_address: []
				}, // 页面数据
			}
		},
		onLoad(option) {
			if (option.arr) {
				this.arr = JSON.parse(option.arr)
				console.log('传递过来的数据', this.arr)
			}
			this.getAddress()
			console.log('id', this.addressData[this.addressIndex])
		},
		onShow() {
			//  获取用户收货地址
			// 页面
		},
		watch: {
			
		},
		methods: {
			//  去结算
			pay() {
				// 先生成订单
				var that = this
				if (!that.payFlag) return
				that.$mrequest({
					url: 'Mini/order/createOrder',
					method: "POST",
					data: {
						order: JSON.stringify(that.arr),
						address_id: that.addressData[this.addressIndex].id
					},
					callBack: function callBack (res) {
						console.log('生成订单成功', res)
						if (res.status) {
							//  执行支付
							that.$mrequest({
								url: 'Mini/order/pay',
								method: 'POST',
								data: {
									order_id: res.data.order_id,
									order_no: res.data.order_no
								},
								callBack: function callBack (res1) {
									//  执行微信支付
									if (res1.appId) {
										uni.requestPayment({
											provider: 'wxpay',
											timeStamp: res1.timeStamp,
											nonceStr: res1.nonceStr,
											package:  res1.package,
											signType: res1.signType,
											paySign: res1.paySign,
											success: function (res2) {
												//  支付成功了 跳转订单列表页面
												uni.redirectTo({
													url: '/order/orderList/index?num=2'
												})
											},
											fail: function (err) {
												// console.log('fail:' + JSON.stringify(err));
												uni.redirectTo({
													url: '/order/orderList/index?num=1'
												})
											}
										});
									}
									
								},
								fail: function fail (res1) {
									uni.showToast({
										title: res1.msg,
										icon: 'none'
									})
								}
							})
							
						} else {
							//  订单生成失败
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						console.log('生成订单失败', res)
					}
				})
			},
			//  获取订单信息
			createOrder() {
				var that = this
				that.$mrequest({
					url: 'Mini/order/create_order_before',
					method: 'POST',
					data: {
						order: JSON.stringify(that.arr),
						address_id: that.addressData[that.addressIndex].id
					},
					callBack: function callBack (res) {
						if (res.status) {
							that.pageData = res.data
							// 把店铺商品数据整合到一个数组里面
							var arr = []
							for(let key in res.data.info){
								arr.push(res.data.info[key])
							}
							that.pageData.info = arr
							that.payFlag = true
							console.log(arr)
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							})
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					},
				})
			},
			//  打开收货地址弹出框
			choseAddress() {
				this.addressFlag = true
			},
			// 切换收货地址
			changeAddress(index) {
				if (index == this.addressIndex) return
				this.addressIndex = index
				this.addressFlag = false
				//  重新渲染数据
				this.createOrder()
			},
			//  获取用户的收货地址
			getAddress() {
				var that = this
				this.$mrequest({
					url: 'Mini/address/getAddress',
					method: 'POST',
					callBack: function callBack (res) {
						if (res.status) {
							that.addressData = res.data
							// console.log('id1', that.addressData[that.addressIndex].id)
							if (JSON.stringify(res.data) == '[]') {
								uni.showToast({
									title: '您还未设置收货地址！',
									icon: 'none',
									duration: 1000,
									complete: (res) => {
										console.log('给爷爬')
										setTimeout(() => {
											that.goAddress()
										}, 1000)
									}
								})
							} else {
								that.createOrder()
							}
						}
					},
					fail: function fail (res) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
			//  跳转到新增收货地址
			goAddress() {
				let arr = JSON.stringify(this.arr)
				uni.navigateTo({
					url: `/me/address/addAddress?arr=${arr}`
				})
			},
			//  商品数量加减
			add(item) {
				//  先操作arr中的数据
				for(let i = 0; i < this.arr.length; i++){
					if (item.id == this.arr[i].goods_id && item.sku_id == this.arr[i].sku_id) {
						this.arr[i].buy_num++
						if (item.cart_id) {
							this.changeNum(item.cart_id, 1)
						}
					}
				}
				
				this.createOrder()
			},
			reduce(item) {
				//  先操作arr中的数据
				for(let i = 0; i < this.arr.length; i++){
					if (item.id == this.arr[i].goods_id && item.sku_id == this.arr[i].sku_id) {
						if (this.arr[i].buy_num > 1) {
							this.arr[i].buy_num--
							if (item.cart_id) {
								this.changeNum(item.cart_id, 0)
							}
						} else {
							return
						}
					}
				}
				this.createOrder()
				// this.changeNum(item.id)
			},
			//  购物车商品数量加（1）减（0）
			changeNum(id, type) {
				var that = this
				this.$http.post({
					url: 'Mini/cart/editCart',
					data: {
						cart_id: id,
						is_type: type
					}
				}).then(res => {
					if (res.status) {
						// that.getShopCarList()
						//  重新获取订单数据
						
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				}).catch(res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.container{
		padding-bottom: var(--status-bar-height);
		box-sizing: border-box;
		background-color: rgba(247, 246, 249, 1);
	}
	.button_box {
		height: 90rpx;
		background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
		// background: #2B95FF;
		border-radius: 45rpx;
		width: calc(100vw - 60rpx);
		font-size: 36rpx;
		font-weight: bold;
		text-align: center;
		line-height: 90rpx;
		color: white;
		margin: 0 auto 70rpx;
		// margin-bottom: 70rpx;
	}
	.to_address_item {
		margin-bottom: 50rpx;
		width: 100%;
		height: 66rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		.check_box {
			flex-shrink: 0;
			width: 32rpx;
			height: 32rpx;
			position: relative;
			margin-right: 26rpx;
		
			img {
				width: 100%;
				height: 100%;
				position: absolute;
				left: 0;
				top: 0;
			}
		}
		
		.txt_box {
			font-size: 26rpx;
			font-weight: blod;
		}
	}
	.msg{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 100%;
		padding: 25rpx 30rpx 25rpx;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 0px 0px 20rpx 20rpx;
		margin-bottom: 10rpx;
		.left{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			width: 100%;
			&>view:nth-child(1){
				margin-bottom: 30rpx;
				// box-sizing: border-box;
			}
		}
		.right{
			display: flex;
			justify-content: center;
			align-items: center;
			&>image{
				display: block;
				width: 21rpx;
				height: 21rpx;
			}
		}
	}
	.goods{
		overflow: hidden;
		// margin: 15rpx 25rpx 0;
		width: 100%;
		padding: 34rpx 20rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 20rpx;
		z-index: 10;
		.store{
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			// height: 28rpx;
			.active{
				flex: 1;
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				height: 28rpx;
				.store_icon{
					display: block;
					height: 26rpx;
					width: 26rpx;
					margin-right: 14rpx;
				}
				.activeName{
					font-size: 26rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #393939;
					margin-right: 8rpx;
				}
			}
			.good{
				display: flex;
				justify-content: flex-start;
				flex-direction: row;
				align-items: center;
				margin: 24rpx 0;
				.isCheck{
					width: 28rpx;
					height: 28rpx;
					&>image{
						display: block;
						height: 28rpx;
						width: 28rpx;
					}
				}
				.goods_pic{
					width: 180rpx;
					height: 180rpx;
					margin-right: 22rpx;
					&>image{
						display: block;
						width: 180rpx;
						height: 180rpx;
					}
				}
				.goods_msg{
					flex: 1;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					height: 180rpx;
					.goods_name{
						font-size: 22rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #676767;
					}
					.goods_spec{
						flex: 1;
						margin-top: 16rpx;
						&>view{
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							height: 46rpx;
							width: 100%;
							background-color: #F7F8F8;
							border-radius: 8rpx;
							font-size: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 500;
							color: #A6A6A6;
							padding: 0 19rpx;
							box-sizing: border-box;
							&>image{
								display: block;
								width: 17rpx;
								height: 17rpx;
							}
						}
					}
					.goods_price{
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						height: 33rpx;
						.price{
							font-size: 18rpx;
							font-family: Source Han Sans CN;
							font-weight: bold;
							color: #F55519;
							&>text{
								font-size: 24rpx;
							}
						}
						.num{
							display: flex;
							flex-direction: row;
							align-items: center;
							height: 33rpx;
							text-align: center;
							&>view{
								width: 43rpx;
								height: 33rpx;
								font-size: 18rpx;
								font-family: Source Han Sans CN;
								font-weight: 500;
								color: #393939;
							}
							&>view:nth-child(2){
								width: 54rpx;
								height: 33rpx;
								background-color: #F7F8F8;
								
								
							}
						}
					}
				}
			}
		}
		.activeMsg{
			width: 100%;
			margin-top: 34rpx;
			padding-left: 46rpx;
			box-sizing: border-box;
			.zhekou{
				display: flex;
				flex-direction: row;
				justify-content: flex-start;
				align-items: center;
				height: 34rpx;
				.manzhe{
					width: 65rpx;
					height: 34rpx;
					background: linear-gradient(90deg, #FF3225, #F55519);
					border-radius: 6rpx;
					text-align: center;
					font-size: 20rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}
				.zhekou_msg{
					flex: 1;
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #040303;
					margin-left: 10rpx;
				}
				.active_check{
					font-size: 22rpx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #838383;
					margin-right: 21rpx;
				}
			}
			.qianggou{
				margin-top: 23rpx;
				font-size: 22rpx;
				font-family: Source Han Sans CN;
				font-weight: 500;
				color: #676767;
				&>text:nth-child(1){
					font-weight: 700;
					color: #040303;
				}
				&>text:nth-child(2){
					margin: 0 14rpx;
				}
			}
		}
		
	}
	.coupon{
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 90rpx;
		border-radius: 20rpx;
		background-color: #fff;
		padding: 0 30rpx;
		box-sizing: border-box;
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #333333;
		margin: 10rpx 0;
		&>view:nth-child(2){
			color: rgba(246, 101, 50, 1)
		}
	}
	.orderMoney{
		width: 100%;
		border-radius: 20rpx;
		background-color: #fff;
	}
	.pay{
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		flex-direction: row;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		height: 100rpx;
		background-color: #fff;
		.zj{
			font-size: 22rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #F55519;
		}
		.btn{
			width: 163rpx;
			height: 62rpx;
			background: linear-gradient(-74deg, #70DAC4, #3EC4A7);
			border-radius: 31rpx;
			margin-left: 61rpx;
			margin-right: 36rpx;
			text-align: center;
			line-height: 62rpx;
			font-size: 26rpx;
			font-family: Source Han Sans CN;
			font-weight: 500;
			color: #FFFFFF;
		}
	}
	.addTitle{
		position: relative;
		font-size: 36rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 600;
		color: #333333;
		line-height: 50rpx;
		text-align: center;
		margin: 20rpx 0;
		.new{
			position: absolute;
			left: 30rpx;
			top: 0;
			bottom: 0;
			margin: auto;
		}
	}
</style>
